<template>
    <div class="doc-info">
        <div class="docinfo-title">
            <img :src="'http://129.211.169.131:21005/images/headers/' + doctorImg" alt="">
            <span>科室:精神科</span>
        </div>
        <div class="content">
            <el-row class="row-bg" :gutter="5">
                <el-col :span="3" v-for="(v, i) in doctorDay " :key="i">
                    <div class="day">{{ v.date }}</div>
                    <div :class="{ active: v.morning == 0 ? false : true }"
                        @click="v.morning == 1 ? v.morning = 0 : v.morning = 1">上午
                    </div>
                    <div :class="{ active: v.afternoon == 0 ? false : true }"
                        @click="v.afternoon == 1 ? v.afternoon = 0 : v.afternoon = 1">下午</div>
                    <div :class="{ active: v.night == 0 ? false : true }"
                        @click="v.night == 1 ? v.night = 0 : v.night = 1">夜班</div>
                </el-col>
            </el-row>
        </div>
        <el-button type="primary" @click="rostering">确定排班</el-button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, computed, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'
const stroe = useStore()
const id = ref(13)
onMounted(() => {

    // if (localStorage.getItem('id')) {
    //     id.value = parseInt(localStorage.getItem('id'))
    // }
    // console.log(id.value);

    stroe.dispatch('doc/A_getDoctor', { id: id.value })
})

//医生排班
const doctorDay = computed(() => {
    return stroe.state.doc.doctorDay.date
})
// 医生图片
const doctorImg = computed(() => {
    return stroe.state.doc.doctorDay.head
})
//修改排班
const rostering = () => {
    console.log(doctorDay.value);
    // if (localStorage.getItem('id')) {
    //     id.value = parseInt(localStorage.getItem('id'))
    // }
    // console.log(id.value);
    stroe.dispatch('doc/A_rosteringDoctor', { id: id.value, newdate: doctorDay.value })
    ElMessage.success('修改成功')
}

</script>

<style scoped lang="scss">
.doc-info{
    width: 99%;
    .docinfo-title{
        display: flex;
        align-items: center;
        img{
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
    }
}
.el-col {
    margin: 15px 1px;

    text-align: center;
    padding: 0;

    div {
        background: #fff;
        height: 18px;
        margin: 1px 0;
    }

    .day {
        background: #07b9b9;

    }


}

.el-col:nth-child(2n) {
    .day {
        background: #36b2ec;
    }
}

.el-row {
    margin: 0 auto;
}

img {
    width: 30px;
    height: 60px;
    border-radius: 20px;
}

.active {
    background: #00b578 !important;
}
</style>